<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue中的数据代理</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        1.Vue中的数据代理:
            通过vm对象来代理data对象中属性的操作（读/写）
        2.Vue中数据代理的好处
            更加方便操作data中的数据
        3.基本原理:
            通过Object.defineProperty()把data对象中所有的属性添加到vm上
            为每一个添加到vm上的属性都指定一个getter/setter
            在getter/setter内部去操作（读/写）data中对应的属性

        引：_data中做了数据劫持——为了监测数据的变化，从而更新视图
    -->

    <div id="root">
      <h1>学校名称：{{name}}</h1>
      <h1>学校地址：{{address}}</h1>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    let data = {
      name: "南京财经大学",
      address: "文苑路3号",
    };

    const vm = new Vue({
      el: "#root",
      data, // options.data = data
    });

    console.log(vm._data === data); // true
  </script>
</html>
